<template>
	<view class="xq">
		<!-- #ifdef H5 -->
		<Tou></Tou>
		<!-- #endif -->
		<scroll-view scroll-y="true" class="main lis"  @scrolltolower="lowerBottom">
			<view class="toubu">
				<view class="ss">
					<sousuo></sousuo>
				</view>
				<view class="xuanze flex1">
					<view class="left fl" @tap="zhuan(0,Text)" >
						<text :class="[state?'lanse':'']">{{Text}}</text>
						
					<view class="csss" :class="[state?'g':'a']" >
							<text   class="iconfont icon-xiajiantou"></text>
					</view>
					</view>
					<view class="right fl" @tap="zhuan(1,TextDecoder)" >
						<text :class="[state1?'lanse':'']">{{TextDecoder}}</text>
						
						<view class="csss" :class="[state1?'g':'a']" >
								<text   class="iconfont icon-xiajiantou"></text>
						</view>
					</view>
				</view>
			
				
			</view>
			<view class="list">
				<view class="" v-for="(item,index) in list2">
					<list1 :item="item"></list1>
				</view>
				
			</view>
			<view class="loading" v-show="shows">
				加载中...
			</view>
			<view class="loading" v-show="di">
				没有数据了
			</view>
		
		</scroll-view>
		<view class="mubu" v-show="show" @tap="off">
			<view class="nr">
				<p  v-for="(item,index) in list1" @tap="huan(item.text,item.id)" :class="{lanse:yanse==item.text}">{{item.text}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import Tou from "@/common/nav-tar.vue"
	import sousuo from "@/components/jiaocheng/sousuo.vue"
	import { apis } from "@/http/api.js"
	import list1 from "@/components/shouye/list3.vue"
	export default {
		data() {
			return {
			state:false	,
			state1:false,
			show:false,
			ji:0,
			Text:'最新上传',
			TextDecoder:'全部价格',
			list:[
				{id:0,text:'最新上传'},
				{id:1,text:'编辑推荐'},
				{id:2,text:'全部价格'},
				{id:3,text:'免费',zi:'Y'},
				{id:4,text:'收费',zi:'N'},
				{id:5,text:'可兑换',zi:'exchange'},
				],
				list1:[],
				list2:[],
				yanse:null,
				yema:1,
				ids:0,
				shows:true,
				di:false,
			}
		},
		created() {
		apis.xqy(this.yema).then((res)=>{
			this.list2=res[1].data.data
		
		})	
		},
		methods: {
			zhuan(val,text){
				this.ji=val
								this.yanse=text
				if (val==0) {
					this.state1=false
					this.state=!this.state
					this.show=this.state
					this.list1=this.list.slice(0,2)
					
				} 
				 else{
					this.state=false
					this.state1=!this.state1
					this.list1=this.list.slice(2)
					this.show=this.state1
				}
				// this.show=true
			
			},
			off(){
					this.show=false
					this.state=false
						this.state1=false
				
			},
			huan(text,id){
				this.ids=id
				this.yema=1
				this.yanse=text
				if (this.ji==0) {
					this.Text=text
					
				} else{
					this.TextDecoder=text
				}
				if (id>0) {
					apis.xqy(this.yema,'1',this.list[id].zi).then((res)=>{
						this.list2=res[1].data.data
						
					
					})	
				} else{
					apis.xqy(this.yema).then((res)=>{
						this.list2=res[1].data.data
					
					
					})
				}
			},
			lowerBottom(){
				this.yema++
				this.shows=true
				
				if (this.ids>0) {
					apis.xqy(this.yema,'1',this.list[this.ids].zi).then((res)=>{
						if (res[1].data.data.length==0) {
							this.show=false
							this.di=true
							
						} else{
							let arr=setTimeout(()=>{
								clearTimeout(arr)
							this.list2=[...this.list2,...res[1].data.data]
							this.show=false
							},500) //哈哈,优化速度加钱
								
						}
					
					})	
				} else{
					apis.xqy(this.yema).then((res)=>{
						if (res[1].data.data.length==0) {
							this.show=false
							this.di=true
							
						} else{
							let arr=setTimeout(()=>{
								clearTimeout(arr)
							this.list2=[...this.list2,...res[1].data.data]
							this.show=false
							},500)
						}
					
					
					})
				}
			}
		},
		components:{
			Tou,
			sousuo,
			list1,
		}
	}
</script>

<style lang="scss" scoped>
	.xq{
		position: relative;
	}
	.toubu{
		border-bottom: 1px solid #eee;
		padding-bottom: 40rpx;
		
		.ss{
		padding: 10rpx 20rpx 30rpx;
	}
	.xuanze{
		.csss{
			width: 30rpx;
			margin-left: 14rpx;
			
		
		}
	}

		
	}
	.list{
		width: 100%;
		padding: 20rpx;
		
		box-sizing: border-box;
	}
	.mubu{
		position: absolute;
	top: 400rpx;
		left: 0rpx;
		width: 100%;
		height: 70vh;
		background-color: rgba(0, 0, 0, .4);
		.nr{
			width: 100%;
			padding: 5rpx 0;
			background-color: #fff;
			p{
				text-align: center;
				font-size: 32rpx;
				line-height: 99rpx;
			}
			
			
		}
		
	}
.lanse{
		    color: #089fee;
		}
		.lis{
			height: 84vh;
			padding-bottom: 40rpx;
		}
</style>
